//out:../css/
div.first,
div.second {
  display: flex;
  justify-content: center;
  background-color: #181c1f;
}
div.first {
  align-items: center;
  height: 100vh;

  .row {
    width: 100%;
    // 倒影线，实际是边界线
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    // 倒影效果
    -webkit-box-reflect: below 1px
      linear-gradient(transparent, transparent, transparent, transparent, #0005);

    .left {
      position: relative;
      height: 420px;
      display: flex;
      justify-content: center;

      .cloud {
        position: relative;
        top: 70px;
        width: 320px;
        height: 100px;
        background-color: #fff;
        border-radius: 100px;
        z-index: 100;
        //光晕效果
        filter: drop-shadow(0 0 35px #fff);

        .text {
          position: absolute;
          top: 40px;
          height: 20px;
          line-height: 20px;
          text-transform: uppercase;
          color: #fff;
          text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 30px #fff;
          transform-origin: bottom;
          animation: rain 2s linear forwards;
        }
      }

      //衍生云朵
      .cloud::before {
        content: "";
        position: absolute;
        top: -50px;
        left: 40px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background-color: #fff;
        //多多变形
        box-shadow: 90px 0 0 30px #fff;
      }
    }

    .right {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      position: relative;

      .introduce {
        margin-top: 100px;

        span.h1,
        span.h4 {
          color: #fff;
        }
      }

      .download {
        position: absolute;
        top: 50%;
        left: 18%;

        a.button {
          // position: relative;
          // z-index: 1;
          display: flex;
          justify-content: space-around;
          min-width: 160px;
          height: 54px;
          color: #ffffff;
          text-decoration: none;
          background-color: transparent;
          border: 2px solid #ffffff;
          border-radius: 7px;
          padding: 0 18px 0 20px;
          font-size: 18px;
          line-height: 52px;
          font-weight: 600;

          position: relative;
          overflow: hidden;
        }

        a.button::after,
        a.button::before {
          content: "";
          width: 100%;
          position: absolute;
          top: -1.5em;
          z-index: -1;
          aspect-ratio: 1;
          border-radius: 40%;
          background-color: rgba(255, 255, 255, 0.25);
          transition: all 0.3s;
        }

        a.button::after {
          left: -40%;
          transform: translateY(5em) rotate(-330deg);
        }

        a.button::before {
          right: -40%;
          transform: translateY(5em) rotate(390deg);
        }

        // 按钮触发后动画
        a.button:hover,
        a.button:focus,
        ul:hover + a.button {
          animation: colors 0.3s forwards;
          // color: #000;
          // transition: all 2s;
        }
        a.button:hover::before,
        a.button:hover::after,
        a.button:focus::before,
        a.button:focus::after,
        ul:hover + a.button::before,
        ul:hover + a.button::after {
          transform: none;
          background-color: rgba(255, 255, 255, 1);
        }

        ul {
          color: #fff;
          list-style: none;
          margin: 0;
          padding: 0;
          border: 2px solid #ffffff;
          border-radius: 7px;
          opacity: 0;
          pointer-events: none;
          transform: translateY(-10px);
          transition: all 0.3s;
          li {
            text-align: center;
            margin: 0.5rem;
            a {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }

        a.button:hover + ul,
        ul:hover {
          opacity: 1;
          transform: translateY(0px);
          pointer-events: all;
        }
      }
    }
  }
}

div.second {
  height: 500px;
  .row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: #181c1f;
    .col-4,
    .col-8 {
      height: 70%;
    }
    .col-8 {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px; // 视距，配合rotateY
      img {
        border-radius: 7px;
        max-width: 60%;
        height: auto;
      }
      .base {
        // transform: rotateY(20deg);
        // image-rendering: pixelated;
        // 倒影效果
        // -webkit-box-reflect: below 1px
        //   linear-gradient(
        //     transparent,
        //     transparent,
        //     transparent,
        //     transparent,
        //     transparent,
        //     #0005
        //   );
      }
      .cover {
        position: absolute;
        max-width: 40%;
        left: 40%;
        bottom: 5%;
      }
    }
    .col-4 {
      display: flex;
      align-items: center;
      .content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        color: white;
        font-size: 150%;
        font-weight: 600;
        i.bi {
          font-size: 250%;
        }
      }
      .download {
        width: 150px;
        margin: 30px 0;
        a.button {
          display: flex;
          justify-content: space-around;
          height: 54px;
          color: #ffffff;
          text-decoration: none;
          background-color: transparent;
          border: 2px solid #ffffff;
          border-radius: 7px;
          padding: 0 18px 0 20px;
          font-size: 18px;
          line-height: 52px;
          font-weight: 600;
          transition: color 0.2s;

          position: relative;
          overflow: hidden;
          z-index: 1;
        }
        a.button::after {
          content: "";
          width: 70%;
          height: 200%;
          border-radius: 50%;
          top: -50%;
          position: absolute;
          z-index: -1;
          background-color: rgba(255, 255, 255, 1);
          transform: scale(0.5, 1);
          opacity: 0;
          transition: all 0.2s linear;
        }
        a.button:hover {
          color: #000;
        }
        a.button:hover:after {
          transform: scale(2, 2);
          opacity: 1;
        }

        a.content {
          text-decoration: none;
        }
      }
    }
  }
}

div.divider {
  height: 5rem;
  background-color: #181c1f;
}

@keyframes rain {
  0% {
    transform: translateY(0) scale(1);
  }

  70% {
    transform: translateY(290px) scale(1);
  }

  100% {
    transform: translateY(290px) scale(0.5);
  }
}

@keyframes colors {
  100% {
    color: #000;
  }
}

@keyframes secondButton {
  100% {
    transform: scaleX(1);
  }
}
